<template>
  <div class="el-chapter" ref="chapter" :class="{ close: !chapterShow }" @contextmenu.prevent="_contextmenu">
    <div class="el-chapter-tree">
      <!-- <div class="el-tree-btnbar" @contextmenu="_contextmenu">
        <el-col :span="24"><el-button type="success" icon="el-icon-circle-plus-outline" @click="append(0)">添加章节</el-button></el-col>
      </div> -->
      <div v-if="plusOnce.show === true" v-show="plusOnce.btn" ref="chapteraddOne" class="el-chapter-addOne"><div class="el-chapter-btn" @click="() => append(0)">添加章节目录</div></div>
      <el-tree
        v-show="chapterShow"
        ref="tree"
        :data="treeDatas"
        :show-checkbox="options.show_checkbox"
        current-node-key="id"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="node_click"
        @node-contextmenu="node_contextmenu"
      >
        <div class="el-chapter-node" slot-scope="{ node, data }">
          <div class="el-chapter-title">{{ node.label }}</div>
          <div v-show="options.show_row_btn" class="el-chapter-child">
            <div class="el-chapter-btn" @click="() => append(1, node, data)">添加同级</div>
            <div class="el-chapter-btn" @click="() => append(2, node, data)">添加子级</div>
            <div class="el-chapter-btn" @click="() => update(3, node, data)">修改</div>
            <div class="el-chapter-btn el-color-red" @click="() => remove(node, data)">删除</div>
          </div>
        </div>
      </el-tree>
    </div>
    <!-- <div class="el-chapter-fold el-fl" @click="_chapterShow">
      <div v-show="!chapterShow" class="el-chapter-foldl"><i class="el-icon-arrow-right"></i></div>
      <div v-show="chapterShow" class="el-chapter-foldr"><i class="el-icon-arrow-left"></i></div>
    </div> -->
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
